<template>
  <div class="mvs-container">
    <div class="filter-wrap">
      <div class="seciton-wrap">
        <span class="section-type">地区:</span>
        <ul class="tabs-wrap">
          <li class="tab" v-for="(item,index) in musicArea" :key="index" @click=sendMsg(item)>
            <span class="title" :class="{active:item===obj.area}">{{item}}</span>
          </li>

        </ul>
      </div>
      <!-- 类型的区域 -->
      <div class="type-wrap">
        <span class="type-type">类型:</span>
        <ul class="tabs-wrap">
          <li class="tab" v-for="(item,index) in musicType" :key="index" @click="sendType(item)">
            <span class="title" :class="{active:item===obj.type}">{{item}}</span>
          </li>
        </ul>
      </div>
      <!-- 排序的区域 -->
      <div class="order-wrap">
        <span class="order-type">排序:</span>
        <ul class="tabs-wrap">
          <li class="tab" v-for="(item,idnex) in musicOrder" :key="(idnex)" @click="snedOrder(item)">
            <span class="title" :class="{active:item===obj.order}">{{item}}</span>
          </li>
        </ul>
      </div>
    </div>
    <!-- mv容器 -->
    <!-- 推荐MV -->
    <div class="mvs">
      <div class="items">
        <div class="item" @click="toMv(item.id)" v-for="(item,index) in mvList" :key="index">
          <div class="img-wrap">
            <img :src="item.cover" alt="" />

            <div class="num-wrap">
              <div class="iconfont icon-play" ></div>

              <div class="num">{{item.playCount|num}}</div>
            </div>
          </div>
          <div class="info-wrap">
            <div class="name">{{item.name}}</div>
            <div class="singer">{{item.artistName}}</div>
          </div>
        </div>

      </div>
      <!-- 分页器 -->
      <el-pagination
        @current-change="handleCurrentChange"
        background
        layout="prev, pager, next"
        :total="total"
        :current-page="page"
        :page-size="30"
        :limit="limit"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
// 导入过去mv的数据
import {getMv} from '@/api/getMv'
export default {
  name: 'mvs',
  data() {
    return {
      // 总条数
      total: 20,
      // 页码
      page: 1,
      // 页容量
      limit: 10,
      musicArea:['全部','内地','港台','欧美','日本','韩国'],
      musicType:['全部','官方版','原生','现场版','网易出品'],
      musicOrder:['上升最快','最热','最新'],
      obj:{
        area:'全部',
        type:'全部',
        order:'上升最快',
        limit:30,
        offset:0
      },
      // 接收数据
      mvList:[],

    };
  },
  created() {
    this.getMV()
  },
  methods: {
    // 点击类型进行数据的切换
    sendType(id){
      this.obj.type=id
       // 页面归一
      this.goInit()
    },
    // 点击排序进行数据的切换
    snedOrder(item){
      // 排序赋值
      this.obj.order=item
      // 页面归一
      this.goInit()
    },
    goInit(){
        // 页码归1
      this.page=1
      // 调用接口
      this.getMV()
    },
    // 点击切换数据
    sendMsg(item){
      this.obj.area=item
      // 页面归一,调用接口
      this.goInit()
    },
    // 获取mv的数据
    async getMV(){
      const {data:data}=await getMv(this.obj)
      // 获取总条数
      // 此时接口有问题,如果有count就赋值
      if(data.count){
      this.total=data.count
      }
      // mv数据
      this.mvList=data.data

    },
    toMv(id) {
      this.$router.push(`/mv?id=${id}`);
    },
    handleCurrentChange(val) {
      // 点击切换页码
          this.page=val
          // 发送数据请求.
          this.obj.offset=( this.page-1)*30
          // 调接口
          this.getMV()
    }
  }
};
</script>

<style >

</style>
